<template>
    <div ref="lottieContainer" class="lottie-container"></div>
  </template>
  
  <script>
  import lottie from 'lottie-web';
  
  export default {
    name: 'LottieAnimation',
    props: {
      animationData: {
        type: Object,
        required: true
      },
      loop: {
        type: Boolean,
        default: true
      },
      autoplay: {
        type: Boolean,
        default: true
      }
    },
    mounted() {
      this.loadAnimation();
    },
    methods: {
      loadAnimation() {
        this.animation = lottie.loadAnimation({
          container: this.$refs.lottieContainer,
          renderer: 'svg',
          loop: this.loop,
          autoplay: this.autoplay,
          animationData: this.animationData
        });
      }
    },
    beforeDestroy() {
      if (this.animation) {
        this.animation.destroy();
      }
    }
  };
  </script>
  
  <style scoped>
  .lottie-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  </style>